---
title: Preview Link Card
description: Displays a preview image of a link when hovered.
author:
  name: imskyleen
  url: https://github.com/imskyleen
releaseDate: 2025-11-17
---

<ComponentPreview name="demo-components-base-preview-link-card" />

## Installation

<ComponentInstallation name="components-base-preview-link-card" />

## Usage

```tsx
<PreviewLinkCard href="https://animate-ui.com/docs">
  <PreviewLinkCardTrigger>Animate UI Docs</PreviewLinkCardTrigger>
  <PreviewLinkCardPanel>
    <PreviewLinkCardImage alt="Preview link card content" />
  </PreviewLinkCardPanel>
</PreviewLinkCard>
```

## API Reference

### PreviewLinkCard

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/preview-link-card#previewlinkcard"
  text="Animate UI API Reference - PreviewLinkCard"
/>

<ExternalLink
  href="https://base-ui.com/react/components/preview-card#root"
  text="Base UI API Reference - PreviewCard.Root"
/>
</div>

### PreviewLinkCardTrigger

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/preview-link-card#previewlinkcardtrigger"
  text="Animate UI API Reference - PreviewLinkCardTrigger"
/>

<ExternalLink
  href="https://base-ui.com/react/components/preview-card#trigger"
  text="Base UI API Reference - PreviewCard.Trigger"
/>
</div>

### PreviewLinkCardPanel

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/preview-link-card#previewlinkcardpanel"
  text="Animate UI API Reference - PreviewLinkCardPanel"
/>

<ExternalLink
  href="https://base-ui.com/react/components/preview-card#panel"
  text="Base UI API Reference - PreviewCard.Panel"
/>
</div>

### PreviewLinkCardBackdrop

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/preview-link-card#previewlinkcardbackdrop"
  text="Animate UI API Reference - PreviewLinkCardBackdrop"
/>

<ExternalLink
  href="https://base-ui.com/react/components/preview-card#backdrop"
  text="Base UI API Reference - PreviewCard.Backdrop"
/>
</div>

### PreviewLinkCardImage

<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/preview-link-card#previewlinkcardimage"
  text="Animate UI API Reference - PreviewLinkCardImage"
/>

## Credits

- [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
- Inspired by [Aceternity UI Link Preview](https://ui.aceternity.com/components/link-preview)
